<template>
	<HyCard>
		<!--  表格头部组件 -->
		<slot name="tableHeader"></slot>
		<!-- 表格组件 -->
		<el-table
			class="mt-5"
			:cell-style="{ textAlign: 'center' }"
			:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
			:data="state.tableData"
			style="width: 100%"
			:row-class-name="tableRowClassName"
			v-loading="state.loading"
			:row-key="tableConfig.rowKey"
			@selection-change="handleSelectionChange"
			:highlight-current-row="tableConfig.singleSelect"
			@current-change="handleCurrentChange"
			:min-width="tableConfig.minWidth || 200"
			ref="tableRef"
			border
		>
			<el-table-column reserve-selection v-if="tableConfig.multiple" type="selection" width="55" />
			<!-- singleSelect为true的时候为单选表格，单选框需要放在最前面，所以要隐藏下面的序号，自己重新写一个序号列 -->
			<el-table-column v-if="!tableConfig.singleSelect" fixed="left" type="index" label="序号" width="55" />
			<template v-for="item in tableColumns">
				<el-table-column
					v-if="!item.slot"
					:type="item.type || 'default'"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:min-width="item.minWidth || 200"
					:fixed="item.fixed ? item.fixed : false"
					:key="item.prop"
					show-overflow-tooltip
					:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
				></el-table-column>
				<el-table-column
					v-else
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:min-width="item.minWidth || 200"
					:fixed="item.fixed ? item.fixed : false"
					:key="item.prop + 1"
					show-overflow-tooltip
					:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
				>
					<template v-slot="scope">
						<slot :name="item.slot" :row="scope.row" :column="scope.column"></slot>
					</template>
				</el-table-column>
			</template>
			<slot name="operation"> </slot>
		</el-table>
		<div v-if="!tableConfig.hiddenPageInfo" style="text-align: right; width: 100%; margin-top: 20px">
			<el-pagination
				v-model:current-page="state.pageInfo.current"
				:page-size="state.pageInfo.size"
				layout="total, sizes,prev, pager, next,jumper"
				:total="state.total"
				@current-change="currentChange"
				@size-change="sizeChange"
			/>
		</div>
	</HyCard>
</template>
<script setup lang="ts">
import HyCard from '/@/components/HyCard/index.vue';
const props = defineProps({
	tableColumns: {
		type: Object,
		default: () => {
			return {};
		},
	},
	tableConfig: {
		default: () => ({
			rowKey: 'id',
			showSearch: false,
			minWidth: 200,
			multiple: false,
			singleSelect: false,
			request: () => {},
			hiddenPageInfo: false,
			defaultData: [],
			selectValues: [],
		}),
		type: Object,
	},
	searchData: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const { tableColumns, tableConfig, searchData } = toRefs(props);

let state = ref<any>({
	pageInfo: {
		current: 1,
		size: 10,
	},
	total: 0,
	loading: false,
	tableData: [],
});

// 获取分页数据
const getTableData = async () => {
	if (tableConfig.value.request) {
		//如果是单选，每次更新接口，要清除之前选择的数据
		if (tableConfig.value.singleSelect) {
			handleCurrentChange({ index: null });
		}
		state.value.loading = true;
		tableConfig.value
			?.request({ ...state.value.pageInfo, ...searchData.value })
			.then((response: any) => {
				state.value.tableData = response?.records || response?.data?.records || response?.data?.list;
				state.value.total = response.data ? Number(response.data.total) : Number(response.total);
			})
			.finally(() => {
				state.value.loading = false;
				emits('sendState', state.value);
				emits('sendSearchData', searchData.value);
			});
	}
};
watch(
	[() => tableConfig.value.defaultData],
	([nv1]) => {
		if (nv1) state.value.tableData = tableConfig.value.defaultData;
	},
	{ immediate: true }
);
watch(
	[() => searchData.value],
	() => {
		getTableData();
	},
	{ deep: true }
);

//页码改变
const currentChange = (current: number) => {
	state.value.pageInfo.current = current;
	getTableData();
};

// 每页数量
const sizeChange = (size: number) => {
	state.value.pageInfo.size = size;
	getTableData();
};

const emits = defineEmits(['sendSelectValue', 'sendState', 'sendSearchData']);
//多选
const handleSelectionChange = (value: any) => {
	emits('sendSelectValue', value);
};
//单选
const handleCurrentChange = (value: any) => {
	emits('sendSelectValue', value);
};
//把每一行的索引放进row
const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
	row.index = rowIndex;
};
//回显选择的行
const tableRef = ref();
const setSelectValues = (selectValues: any) => {
	state.value.tableData.forEach((item: any, index: number) => {
		selectValues.forEach((s: any) => {
			if (item[tableConfig.value.rowKey] === s[tableConfig.value.rowKey]) {
				// 回显选中行
				tableRef.value?.toggleRowSelection(state.value.tableData[index], true);
			}
		});
	});
};

//监听tableData变化，设置选中的值
watch(
	[() => state.value.tableData],
	() => {
		if (tableConfig.value.multiple && tableConfig.value.selectValues && tableConfig.value.selectValues?.length > 0) {
			setSelectValues(tableConfig.value.selectValues);
		}
	},
	{ deep: true }
);
// 暴露
defineExpose({ getTableData, setSelectValues });
</script>
<style scoped lang="scss"></style>
